### Описание

Пример расширения браузера для работы с DevTools, в примере используются: **API chrome.devtools.panels**, 
**API chrome.devtools.panels.elements**, **API chrome.devtools.panels.sources**.

### Технологии

* JavaScript
* Chrome API
* Chrome DevTools

### Установка

1. Загрузить zip-архив репозитория или клонировать репозиторий
2. Распаковать архив
3. Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:
```
chrome://extensions/
```
4. В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
5. В верхней левой части экрана нажать кнопку 'Загружить распакованное расширение' и указать путь к папке '/extension' из п.2

### Описание работы

Для демонстрации работы расширения необходимо:

- установить расширение;
- открыть в браузере инструменты разработчика и в них выбрать одну из панелей, описанных в следующем разделе

#### В примере создаются следующие панели DevTools

<details>
  <summary markdown="span">Пример создания вкладки: chrome.devtools.panels.create()</summary>
  ![Схема 1](/other/panels_create.jpg)
</details>

<details>
  <summary markdown="span">Пример создания вкладки: chrome.devtools.panels.elements.createSidebarPane()</summary>
  ![Схема 2](/other/panels_elements.jpg)
</details>

<details>
  <summary markdown="span">Пример создания вкладки: chrome.devtools.panels.sources.createSidebarPane()</summary>
  ![Схема 3](/other/panels_sources.jpg)
</details>

#### Дополнительно

Возможности по наполнению панелей данными:
* chrome.devtools.panels.create:
  * setPage() - HTML-страница
* chrome.devtools.panels.elements и chrome.devtools.panels.sources:
  * setPage() - HTML-страница
  * setObject() - Json-объект (как статичный, так и как результат выполнения функции)
  * setExpression() - результат выполнения переданного скрипта на странице приложения